<template>
	<div>
		<div class="title">
			堂食订单
		</div>

		<div class="ChooseInput">
			<div class="time">
				<el-select v-model="value" placeholder="下单时间">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
			</div>

			<div>
				<div class="block">
					<el-date-picker v-model="value1" type="datetimerange" range-separator=" - " start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</div>
			</div>

			<div>
				<span class="statusLabel">订单状态</span>
				<el-select v-model="value" placeholder="全部">
					<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
			</div>
		</div>

		<div class="ChooseInput">
			<div class="searchStatus">
				<el-select v-model="value2" placeholder="按名称：">
					<el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
			</div>
			
			<div class="searchInput">
				<el-input v-model="input" placeholder="请输入内容"></el-input>
			</div>
			

			<el-button type="primary">查询</el-button>
			<el-button>清空</el-button>
		</div>

		<div class="btn">
			<el-button type="primary" icon="el-icon-plus">添加</el-button>
			<el-button type="primary" plain>批量删除</el-button>
			<el-button type="primary" plain>批量导出</el-button>
		</div>

		<div>
			<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"> </el-table-column>
				<el-table-column prop="id" label="ID" width="50"> </el-table-column>
				<el-table-column prop="serialNum" label="ID" width="160"> </el-table-column>
				<el-table-column prop="name" label="姓名" width="120"> </el-table-column>
				<el-table-column prop="phone" label="电话" width="120"> </el-table-column>
				<el-table-column label="创建日期" width="120">
					<template slot-scope="scope">{{ scope.row.date }}</template>
				</el-table-column>
				<el-table-column prop="price" label="价格" width="80"> </el-table-column>
				<el-table-column prop="status" label="状态" width="80"> </el-table-column>
			</el-table>
			<div style="margin-top: 20px;text-align:center;">
				<el-pagination background layout="prev, pager, next" :total="100"> </el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			options: [
				{
					value: '1',
					label: '其他',
				},
				{
					value: '2',
					label: '双皮奶',
				},
			],

			options2: [
				{
					value: '1',
					label: '全部',
				},
				{
					value: '2',
					label: '已结账',
				},
				{
					value: '3',
					label: '用餐中',
				},
				{
					value: '4',
					label: '已预定',
				},
			],
			options3: [
				{
					value: '1',
					label: '按名称',
				},
				{
					value: '2',
					label: '按其他',
				},
				{
					value: '3',
					label: '按状态',
				},
			],
			tableData: [
				{
					id: 1,
					serialNum: '588989622212166',
					date: '2016-05-02',
					name: '王小虎',
					phone: '18010001111',
					price: '￥123',
					status: '用餐中',
				},
				{
					id: 2,
					serialNum: '588989622212166',
					date: '2016-05-04',
					name: '王小虎',
					phone: '18010001111',
					price: '￥123',
					status: '用餐中',
				},
				{
					id: 3,
					serialNum: '588989622212166',
					date: '2016-05-01',
					name: '王小虎',
					phone: '18010001111',
					price: '￥123',
					status: '用餐中',
				},
				{
					id: 4,
					serialNum: '588989622212166',
					date: '2016-05-03',
					name: '王小虎',
					phone: '18010001111',
					price: '￥123',
					status: '用餐中',
				},
			],
			value: '',
			value1: '',
			value2: '',
			input: '',
		};
	},
};
</script>

<style lang="scss" scoped>
.title {
	font-size: 20px;
	padding-left: 10px;
	border-left: 5px solid #409eff;
	color: #409eff;
}

.ChooseInput {
	display: flex;
	margin: 20px 0;
	.time {
		margin-right: 20px;
	}
	.block {
		margin-right: 70px;
	}

	.statusLabel {
		padding: 20px;
	}

	.searchStatus{
		margin-right: 20px;
	}

	.searchInput{
		width:350px;
		margin-right: 20px;
	}
}

.btn {
	display: block;
	margin-bottom: 20px;
}
</style>
